<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/class.css">
    <link rel="stylesheet" href="../css/commin.css">
    <link rel="stylesheet" href="../icon/iconfont.css">
</head>

<body>
    <div id="classHeader">
        <!-- 头部 -->
        <header>
            <div class="shop" id="shop" >
                <!-- <a><i class="iconfont icon-xiangzuojiantou"></i></a> -->
                <div class="page">
                    <h3>{{title}}</h3>
                </div>
            </div>
        </header>

        <!-- 主体 -->

        <div class="main-body">
            <!-- 搜索框 -->
            <div class="search">
                <a href="../商品搜索/index.html" @click.prevent>
                    <div class="last">
                        <i class="iconfont icon-sousuo"></i>
                        <span>搜索商品</span>
                    </div>
                </a>
            </div>
            <!-- 切换 -->
            <div class="main">
                <!-- 左侧切换 -->
                <div class="left" >
                    <span v-for="(item,index) in Leftlist" :key="item.category_id" 
                    :class="{active:activeIndex === index}"
                    @click="clickToggle(index)">{{item.name}}</span>
                </div>
                <!-- 右侧切换 -->
                <div class="right">
                    <div class="flex-three" v-for="item in rightList">
                        <a href="#" @click.prevent  >
                            <div class="cate-img">
                                <div class="img"><img :src="item.image.external_url" alt=""></div>
                            </div>
                            <div class="text-name">{{item.name}}</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <footer>

            <a href="./index.html" class="active">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
            <a href="#" @click.prevent>
                <i class="iconfont icon-fenlei"></i>
                <p>分类</p>
            </a>
            <a href="../购物车/index.html" @click.prevent>
                <i class="iconfont icon-gouwuchekong"></i>
                <p>购物车</p>
            </a>
            <a href="../我的/index.html" @click.prevent>
                <i class="iconfont icon-wode"></i>
                <p>我的</p>
            </a>
        </footer>

    </div>


    <script src="../js/axios.js"></script>
    <script src="../js/commin.js"></script>
    <script src="../js/class.js"></script>
    <script src="../js/vue.js"></script>
    <!-- // 接口调用基础地址：http://cba.itlike.com/public/index.php?s=/api/ -->
    <script>
        const classHeader = new Vue({
            el: '#classHeader',
            data: {
                title: '全部分类',
                Leftlist: [],
                rightList: [],
                activeIndex:0
            },
            created() {
                this.getData()
            },
            methods: {
                async getData() {
                    const { data: data } = await axios.get('http://cba.itlike.com/public/index.php?s=/api//category/list')
                    console.log(data.data.list)
                    // console.log(data.data.list[0].children)
                    this.Leftlist = data.data.list
                    this.rightList = this.Leftlist[0].children
                },
                clickToggle(index){
                    this.activeIndex = index
                    if(this.Leftlist[index].children)  {
                        this.rightList = this.Leftlist[index].children
                    } else {
                        this.rightList = []
                    }
                    
                }

            }

        })
    </script>





</body>

</html>